<template>
  <el-card shadow="never">
    <template #header>
      <el-form label-width="80px">
        <el-row :gutter="24">
          <el-col :span="6" :xs="24">
            <el-form-item label="用户姓名">
              <el-input v-model="page.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="手机号码">
              <el-input v-model="page.phone"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="服务费类型" label-width="100px">
              <el-select v-model="page.type" style="width: 100%" clearable>
                <el-option v-for="item in typeList" :key="item.key" :value="item.key" :label="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label="贷超APP">
              <el-select v-model="page.appName" style="width: 100%" clearable>
                <el-option v-for="item in productList" :key="item.appId" :label="item.appName"
                           :value="item.appName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10" :xs="24">
            <el-form-item label="消费时间">
              <el-date-picker
                  style="width: 100%"
                  v-model="page.createTimeValue"
                  type="daterange"
                  range-separator="~"
                  value-format="x"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getTableData">查询</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </template>

    <el-card style="margin-bottom:20px" shadow="never" :body-style="{padding:'0px'}">
      <Table :tableData="typeTotalList" :page="false" border
      >
        <el-table-column label="OCR识别" prop="1" align="center"></el-table-column>
        <el-table-column label="人脸比对" prop="2" align="center"></el-table-column>
        <el-table-column label="活体检测" prop="3" align="center"></el-table-column>
        <el-table-column label="短信验证码" prop="4" align="center"></el-table-column>
        <el-table-column label="语音验证码" prop="5" align="center"></el-table-column>
      </Table>
    </el-card>

    <div  style="margin-bottom: 15px;color: #409eff" type="primary" :underline="false">消费总金额：{{totalAmount}}</div>
    <Table :tableData="tableData" :tableColumn="tableColumn" :page="page"
           @handleCurrentChange="(val)=>{page.pageNum = val,getTableData()}"
           @handleSizeChange="(val)=>{page.pageSize = val,getTableData()}"
    >
    </Table>
  </el-card>
</template>

<script>
import {defineComponent, onMounted, reactive, ref, toRefs,} from 'vue'
import {consumeRecordList, consumeRecordTotal, consumeRecordTypeTotal} from '@/api/loanSupermarket'
import {selectProductList} from '@/api'
import {ElMessage, ElMessageBox} from "element-plus";
import {dateFormatTimeStamp} from "@/utils";

const tableColumn = [
  {label: '贷超APP', prop: 'appName', align: 'center'},
  {label: '用户姓名', prop: 'name', align: 'center'},
  {label: '手机号码', prop: 'phone', align: 'center'},
  {label: '消费金额', prop: 'amount', align: 'center'},
  {label: '消费时间', prop: 'creationTime', align: 'center'},
  {label: '服务费类型', prop: 'type', align: 'center'},
]
const typeList = [
  {key: 1, value: 'OCR识别'},
  {key: 2, value: '人脸比对'},
  {key: 3, value: '活体检测'},
  {key: 4, value: '短信验证码'},
  {key: 5, value: '语音验证码'},
]
export default {
  name: "ConsumeRecord",
  setup() {
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      productList: [],
      tableData: [],
      typeTotalList: [],
      totalAmount: 0
    })
    const methods = {
      async getTableData() {
        const [datetimeStart, datetimeEnd] = dateFormatTimeStamp(state.page.createTimeValue)
        const params = {
          datetimeStart, datetimeEnd,
          ...state.page,
          createTimeValue: null
        }
        methods.getTypeTotal(params)
        methods.getTotal(params)
        const res = await consumeRecordList(params)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list.map(item => {
            item.type = typeList.find(v=>v.key === item.type).value
            return item
          })
          state.page.total = total
        }
      },
      getSelect() {
        selectProductList({status: 1}).then(res => {
          state.productList = res.data
        })
      },
      async getTypeTotal(params) {
        const res = await consumeRecordTypeTotal(params)
        if (res.code === 200) {
          const obj = {}
          res.data.forEach(item => {
            obj[item.type] = item.amount
          })
          state.typeTotalList = [{...obj}]
        }
      },
      async getTotal(params) {
        const res = await consumeRecordTotal(params)
        if (res.code === 200) {
          state.totalAmount = res.data || 0
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        methods.getTableData()
      }
    }
    onMounted(() => {
      methods.getTableData()
      methods.getSelect()
    })
    return {
      ...methods,
      ...toRefs(state),
      tableColumn,
      typeList
    }
  }
}
</script>

<style scoped>

</style>
